<template>
	<view>
		<view
			class="head-wrapper" 
			:style="{ paddingTop: statusBarHeight + 'px' ,height:naviagteHeight+'px'}"
			:class="pageScrollHeight>=headerScrollHeight?'head-wrapper-scroll':''"
		>
			<view class="head-menu">
				<view class='iconfont icon-fanhui2' @click="returns"></view>
			</view>
		</view>
		<view class="goods-image" >
			<image :src="goodsDetail.image" mode="heightFix" class="image"></image>
		</view>
		<view class="card">
			<view class="name">
				{{goodsDetail.store_name}}
			</view>
			<view class="p2 m-top">
				<span class="sales">月售：200+</span>
				<span>5人收藏</span>
			</view>
			<view class="flex justify-between m-top">
				<span class="price">￥<span class="price-text">25</span></span>
				<!-- <button class="button">加入购物车</button> -->
			</view>
		</view>
		<view class="card">
			<view class="title">
				商品详情
			</view>
			<view class="flex justify-between m-top">
				<view class="sub-title flex-shink p2">
					商品描述
				</view>
				<view class="sub-content">
					{{goodsDetail.store_info}}
				</view>
			</view>
		</view>
		<Comments></Comments>
	</view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;	

import { getGoodsCommentsList } from '@/api/localLife/shopDetail.js'

import Comments from '../component/comments.vue'
export default{
	data(){
		return {
			statusBarHeight:statusBarHeight,
			naviagteHeight:47,
			// 页面滚动距离
			pageScrollHeight:0,
			// 页面滚动超出距离 px
			headerScrollHeight:100,
			goodsDetail:{},
			comments:{}
		}
	},
	components:{
		Comments
	},
	onPageScroll(res) {
		// console.log(res)
		this.pageScrollHeight = res.scrollTop
	},
	onLoad(options) {
		// #ifdef MP-WEIXIN
			const info = uni.getMenuButtonBoundingClientRect()
			// 边距
			const padding = info.top - this.statusBarHeight;
			this.naviagteHeight = info.height + padding*2 + this.statusBarHeight
		// #endif
		if(options.detail){
			this.goodsDetail = JSON.parse(options.detail)
			console.log(this.goodsDetail)
		}
	},
	methods:{
		toGetGoodsCommentsList(){
			getGoodsCommentsList(this.goodsDetail.mer_id).then((res)=>{
				this.comments = res.data;
			})
		},
		returns(){
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.flex{
	display: flex;
}
.justify-between{
	justify-content: space-between;
}
.image{
	height: 100%;
	width: 100%;
}
.card{
	background-color: white;
	border-radius: 12rpx;
	padding: 16rpx;
	margin: 0 20rpx;
	margin-top: 20rpx;
}
.p2{
	font-size: 26rpx;
	color: #888;
}
.m-top{
	margin-top: 12rpx;
}
.flex-shink{
	flex-shrink: 0;
}

.head-wrapper {
	z-index: 99;
	display: flex;
	align-items: center;
	position: fixed;
	left: 0rpx;
	right: 0rpx;
	top: 0;
	display: flex;
	align-items: center;
	padding:0 30rpx;
	.head-menu{
		background-color: rgba(0, 0, 0,0.5);
		color: white;
		border-radius: 50%;
		font-size: 16rpx;
		padding: 8rpx ;
	}
}
.head-wrapper-scroll{
	background-color: white;
	.head-menu{
		color: black;
		background-color: white;
		border:none;
	}
}
.goods-image{
	width: 100%;
	height: 400rpx;
	text-align: center;
}
.name{
	font-size: 34rpx;
	font-weight: bold;
}
.sales{
	margin-right: 12rpx;
}
.price{
	color: #f93512;
	font-weight: bold;
	font-size: 28rpx;
	.price-text{
		font-size: 36rpx;
	}
}
.button{
	font-size: 26rpx;
	font-weight: bold;
	color: white;
	background-color: #50abff;
	padding: 14rpx 28rpx;
	line-height: 24rpx;
	border-radius: 24rpx;
}

.title{
	font-weight: bold;
	font-size: 30rpx;
}
.sub-title{
	margin-right: 16rpx;
}
.sub-content{
	font-size: 28rpx;
}
</style>